ds.t Episode IV: GMO Pepabo
https://gyazo.com/6249233ac88b26a5d163bc957612a799
ペパボの取り組み
GMOペパボ デザイングループマネージャー
会社と自分とチームの紹介
社員400人
デザイナー40人（東京・福岡）
オフィス：東京・福岡・鹿児島
マルチサービス、マルチブランド
事業横断デザイングループのマネージャー
CTO室
デザイングループ
デザイン戦略チーム
コーポレートデザインチーム
やること
デザイナー組織の強化
共通言語・概念の作成、人材育成
ペパボデザインスキーム
会社全体のどこにワークしているかを描く
プロダクトとコミュニケーションに分岐
ツール
コンテンツ
事業部へのコンサルティング
ブランディング
ボトムアップ、トップダウンで行う
資産。経営資源としてのブランド
資産形成と活用を回していく
福利での運用
マーケットから認知するブランド
記号
名称、ロゴ、VI
体験
利用体験、広告や口コミの認知
体験の一貫性
デザインシステムをやる
事業
EC
ホスティング
ドメインが別なので事業ごとでデザインシステムを作り始める
大統一基盤デザインシステムをやる
各デザインシステムの被っている部分を束ねる
InHouse
Perceptional Pattern Library
Functional Pattern Library
Design Principle
Style Guide
アイコン、レイアウトシステム
Palette
カラー、タイポグラフィ
Flavor
マルチブランドへの展開をできるもの
プロダクトに特化している
ペパボはコミュニケーション施策が多い
周波数
連続値の中から離散的に数値を取得する
どこで使われるかわかる名前
Value Tokens
$color-red-50, $color-red-100, $color-red-200
Semantic Tokens
$card-bg-color
Value Tokenをアサインする
$card-bg-color: $color-red-50
インスタンスはPepperと呼ばれている
どこから始めるか
いきなりやらない
わかりやすいところ
コントロール可能なところ
事業部や会社の根回しも平行
Corporate Color / Typography
コーポレートデザインチーム
スライド資料
決算説明資料
ウェブページ
サイト
ブログ
印刷物、動画など
課題
特殊な技能を持った人がやる属人化
スケールしない
場当たりでつくるのではなくチームとして一貫したメッセージを発信したい
Color Palette
Open Color
Torch Color
実現しようとおもったが難しくて挫折
デザインのテイストを一枚で確認できるもの
決めた色を適用して違和感がないか検証
これを満たすと要件になる
用途を決めて要件を絞った
業績報告会が迫っていた
スライド資料に適応
12色も必要ない
基本4色＋グレー
10段階もいらない
5段階で足りそう
パラメーター
色を決めた手順
ロゴの色から出発
#3e6f99
ロゴとおなじ色相で限界に薄い色と濃い色を決めた
限界に薄い色と濃い色の間で差が等間隔になる値を探した
Papper Blueを作成
macOSのカラーパレットに登録
papper-color.json
pepper-color.scss
pepper-color.sketchpalette
Typographic Scale
英語より日本語のほうがline-heightが詰まっている
Harmonic Typographic Scaleというものを作った
数値を入れると自動的にSemantic Tokensが生成される
読み物系のコンテンツで使われる
スライド資料のデザインシステム
デザイン戦略チーム
なぜやったのか
CDTがつくるスライド資料の資料と頻度が多い
稼働コストがかかる
決算説明会資料
IR系のページで使われている
制作の流れ
情報収集
経営企画
ドラフト
急な変更が多い
CDT
伝えたい内容をビジュアル化
抱えていた問題
属人化
クオリティが担保しに行く意
調整が時間がかかり、情報を伝えるデザインがつくれない
いい感じに、他社のを参考に
問題はデジタルプロダクトと似ていたのでデザインシステムを導入
どうやったか
スタイルガイドから着手
既存のものをカテゴリ分けをして見た目の揺れを一本化
再帰しながらアップデート
Papper
決算説明会スライドのデザインシステム
スタイルガイド
できたもの
Color
Typography
Grid
線
グラフの塗りつぶし
強調
ロゴ
やった結果
バージョン2
特徴
パワーポイントで作っているのでそこからのみ参照
使うだけでルールが守れる
マスター管理するとスタイルガイドもアップデートできる
ただのスタイルガイド
デザイン原則の制定
経営企画にヒアリング
ターゲットの目的を知る
方針に賛同してもらえた
原則はWIP
投資家への知見が足りないので理解をしようとした
今後の展望
もっと活用できるレベルにしていく
土台を固めて
成果につなげる
ライティングスタイルガイド、つくってます
mewmo / 望月美憂
CDT
アシスタントプログラムマネージャー
デザイナー
前職は編集の仕事をしていた
Kindaichiプロジェクト
日本語でコミュニケーションする際に表現表記を一貫したものにする
ライティングスタイルガイド
コミュニケーションのトーン
トーンにもとづいた日本語表記ルール
まずは他社リサーチ
ボイスだけ・文章の表記まで
コミュニケーション全般・UI上のテキスト
企業毎で定義や深度はまちまち
ペパボは何を目指すのか？
企業としてのコミュニケーション全般における定義
揺れのない文章を書く
課題点
編集的目線が必要
文字校正の基準
文体、調子
漢字の開き方
用語の統一
ルビ
チェックツールと用語集
ツールを開発中
テキストを入力するとエラーを教えてくれる
用語集を正誤表としてつくっている
スプレッドシートでDBとする
文脈によって0/1で判定できないものはある
いい・良い
人にしか判断できない
人が読むドキュメントにする
今後の展開
チェックツールのUIにPepperを適用していく
パートナー全体で協働していく
課題ドリブンのデザインシステム
kii0719 / きでりん
デザイナー・フロントエンドエンジニア
minne事業部
Myeogtae（ミョンテ）
2018年春頃から作成開始
デザイナー7人全員で作成・運用
長いサービスのデザインシステムは難しい
難しいながらも試行錯誤
原則をきめるときに大喜利
こんなminnneは嫌だ
CSやディレクター職種を超えて話し合った
現状のUIや制作物を参考に
Color, Typography
愛、おばけ、オリジナル
できた！
できた？
つまづきからの気付き
あまり実用的ではなかった
形にすることに一生懸命だった
実際のタスクとか想定できなかった
いいガイドラインはあった
イラスト
アイコン
なぜ実用的になったか
実際のタスクをすすめる中でルール化したから
作りやすいルールを作っていく
成果物もそこにたどり着きやすくなる
課題ドリブンを試しました
アウトソーシングのレビュー
思った感じのデザインがあがってこない
やりとりのコストが非常に高い
外部ガイドラインが必要
原則のアップデート
作品と作家が主役
壁がない
居心地がいい
もっと課題ドリブンに
困りごとを拾い上げる会
困りごとから課題を見つける
minneっぽいデザインが不明
真新しさやワクワクを表現したいけど原則に反してないか心配になるときがある
課題ドリブンのいいところ
実用的なデザインシステムにつなげる
課題解決目的なので優先度がさがりにくい